<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    body
    {
        font-size: 60px;
    }
    .box1
    {
        width: 200px;
        height: 200px;
        background-color: blue;
    }
    .box2
    {
        width: 200px;
        height: 200px;
        background-color: red;
        /*
        定位（position)
        定位是一种更加高级的布局手段
        通过定位可以将元素摆放到页面的任意位置
        使用position属性来设置定位
        可选值
        static 默认值，元素是静止的，没有开启定位
        relative 开启元素的相对定位
        absolute 开启元素的绝对定位
        fixed 开启元素的固定定位
        sticky 开启元素的粘滞定位

        相对定位：
        当元素的position属性值设置为relation时则开启了元素的相对定位
        相对定位的特点
        1.元素开启相对定位以后，如果不设置偏移量，元素不会发生任何的变化
        2.相对定位是参照与元素在文档流中的位置进行定位的
        3.相对定位会提升元素的层级
        4.相对定位不会使元素脱离文档流
        5.相对定位不会改变元素的性质，块元素还是块元素，行内元素还是行内元素
        偏移量：offset
        当元素开启了定位以后，可以通过偏移量来设置元素的位置
        top
        定位元素和定位位置上边的距离
        bottom
        定位元素和定位位置下边的距离
        定位元素垂直方向的位置由top和bottom两个属性来控制
        top值越大，定位元素越向下移动；bottom值越大，定位元素越向上移动
        通常情况下，我们只会使用其中之一
        left
        定位元素和定位位置的左侧距离
        right
        定位元素和定位位置的右侧距离
        定位元素水平方向的位置由left和right两个属性控制
        通常情况下只会使用一个
        left越大元素越靠右，right越大元素越靠左
        */
        position: relative;
        left: 200px;
        bottom: 200px;
    }
    .box3
    {
        width: 200px;
        height: 200px;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>